<template>
    <BasePopPanel
        title="摄像头"
        type="right"
        right="1010px"
        width="298px"
        height="layer-panel-max-height"
        :show-close="false"
        class="reset-layer-tool-panel-box"
    >
        <!-- 头部切换按钮 -->
        <div class="header-box">
            <div class="check-box">
                <ElCheckbox v-model="isCheckAll" @change="onCheckAllChange" />
            </div>
            <div class="tabs-box">
                <TabBtnGroup v-model="selectTab" :tab-list="tabs" />
            </div>
        </div>
        <!-- 摄像头勾选 -->
        <ElScrollbar class="scroll-box">
            <ElTree
                ref="elTreeRef"
                node-key="code"
                :key="treeRefreshKeys"
                :data="treeData"
                :props="treeProps"
                :show-checkbox="true"
                :check-strictly="false"
                :expand-on-click-node="false"
                :check-on-click-leaf="false"
                :default-expanded-keys="defaultExpandKeys"
                :indent="32"
                :icon="ArrowRightBold"
                @check="onCheck"
            >
                <template #default="{ node, data }">
                    <div class="node-item">
                        <span>{{ node.label }}</span>
                        <span class="num-style" v-if="typeof data.num === 'number'">
                            ({{ data.num }})
                        </span>
                    </div>
                </template>
            </ElTree>
        </ElScrollbar>
    </BasePopPanel>
</template>

<script setup lang="ts">
import { getVideoListTree } from '@/api/camera'
import BasePopPanel from '@/components/BasePopPanel/index.vue'
import TabBtnGroup from '@/components/TabBtnGroup/index.vue'
import { ArrowRightBold } from '@element-plus/icons-vue'
import { controlCameraVideoCommonPointLayer } from '@/utils/map-tools/camera-map-tools'

// props定义
const props = defineProps<{
    defaultTab: string
    checkMode: 'ALL' | 'CUSTOM' // ALL 全选  CUSTOM 自定义需配合
    defaultCheckedKeys: any[] // 默认勾选 需开启 checkMode = CUSTOM
}>()

// emit 定义
const emit = defineEmits(['click-point', 'clear-pop'])

// 全选
const isCheckAll = ref(false)
const onCheckAllChange = () => {
    if (isCheckAll.value) {
        const allKeys = getAllKeys()
        elTreeRef.value.setCheckedKeys(allKeys)
    } else {
        elTreeRef.value.setCheckedKeys([])
    }
    getAllCheckedKeys()
}

// 选择的tab
const selectTab = ref(props.defaultTab ?? 'space')
// tabs定义
const tabs = [
    { label: '业务', value: 'business' },
    { label: '来源', value: 'source' },
    { label: '空间', value: 'space' },
]

/**
 * 树
 */
const elTreeRef = ref<any>(null)
const treeData = shallowRef<any[]>([])
const treeProps = {
    label: 'title',
    value: 'code',
}
const defaultExpandKeys = shallowRef<any[]>([])
const treeRefreshKeys = ref(1)
// 获取摄像头分组数据
const fetchTreeData = async () => {
    try {
        const { data } = await getVideoListTree({
            type: selectTab.value,
        })
        treeData.value = data ?? []
        if (treeData.value.length) {
            const keys: any[] = []
            treeData.value.forEach(item => {
                keys.push(item.code)
            })
            defaultExpandKeys.value = keys
        }
        treeRefreshKeys.value++
    } catch (error) {
        console.error(error)
    }
}
// 获取所有的keys
const getAllKeys = () => {
    const keys: any[] = []
    const worker = (arr: any[]) => {
        arr.forEach(item => {
            keys.push(item.code)
            if (item.children && item.children.length) {
                worker(item.children)
            }
        })
    }
    worker(treeData.value)
    return keys
}
const onCheck = () => {
    getAllCheckedKeys()
}

watch(
    selectTab,
    async () => {
        controlCameraVideoCommonPointLayer(null)
        // 获取树数据
        await fetchTreeData()

        if (props.checkMode === 'ALL') {
            isCheckAll.value = true
            onCheckAllChange()
        } else {
            if (elTreeRef.value) {
                if (
                    props.defaultCheckedKeys &&
                    props.defaultCheckedKeys.length &&
                    selectTab.value === props.defaultTab
                ) {
                    elTreeRef.value.setCheckedKeys(props.defaultCheckedKeys)
                } else if (treeData.value && treeData.value.length) {
                    elTreeRef.value.setCheckedKeys([treeData.value[0].code])
                }

                nextTick(() => {
                    getAllCheckedKeys()
                })
            }
        }
    },
    {
        immediate: true,
    },
)

// 获取所有勾选的编码
const getAllCheckedKeys = () => {
    emit('clear-pop')
    if (elTreeRef.value) {
        const allCheckedKeys = elTreeRef.value.getCheckedKeys()
        const allHalfCheckedKeys = elTreeRef.value.getHalfCheckedKeys()
        const allKeys = [...allHalfCheckedKeys, ...allCheckedKeys].join(',')
        controlCameraVideoCommonPointLayer({
            codes: allKeys,
            type: selectTab.value,
            onClickPoint: (info: any) => {
                emit('click-point', info)
            },
        })
    }
}

onBeforeUnmount(() => {
    emit('clear-pop')
    controlCameraVideoCommonPointLayer(null)
})
</script>

<style lang="scss" scoped>
:deep(.el-checkbox) {
    --el-checkbox-input-width: 16px;
    --el-checkbox-input-height: 16px;
    --el-checkbox-height: 16px;
    --el-checkbox-bg-color: rgba(255, 255, 255, 0.08);
    --el-checkbox-input-border: 1px solid rgba(255, 255, 255, 0.3);

    .el-checkbox__inner::after {
        left: 5px;
        border-width: 2px;
        top: 1px;
    }
}

.header-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;

    .check-box {
        margin-right: 16px;
        display: flex;
        align-items: center;
    }

    .tabs-box {
        flex: 1;
        width: 0;

        :deep(.el-radio-button__inner) {
            font-size: 18px !important;
            height: 28px !important;
        }
    }
}

.scroll-box {
    width: 100%;
    height: calc(100% - 44px);
    padding-right: 8px;

    :deep(.el-tree) {
        > .el-tree-node {
            > .el-tree-node__content {
                padding-left: 12px !important;
                background: rgba(89, 197, 255, 0.1);
            }
        }
    }

    :deep(.el-tree-node) {
        .el-tree-node__content {
            height: 36px !important;

            .el-tree-node__expand-icon {
                position: absolute;
                right: 0;
            }
        }
    }

    .node-item {
        display: flex;
        align-items: center;
        width: 76%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-break: break-all;

        .num-style {
            font-size: 16px;
            font-family: Oswald;
            line-height: 16px;
            height: 16px;
            margin-left: 4px;
        }
    }
}
</style>
